<template>
  <div class="buy-version-item" :class="bg">
    <div class="version-content-bg"></div>
    <div class="version-content">
      <div class="version-price-info">
        <div class="version-title">{{ item.versionName }}</div>
        <div
          class="no-price"
          v-if="item.price === 0 && item.versionList.length == 0"
        >
          面议
        </div>
        <template v-else>
          <div class="version-price-box">
            <span class="price">￥{{ item.price }}</span>
            <span class="price-unit">/{{ item.unit }}</span>
          </div>
          <div class="old-price">{{ item.oldPrice }}</div>
        </template>
        <div class="buy-btn">
          <com-button
            class="btn"
            type="primary"
            size="small"
            @click="onBuyClick"
            >立即购买</com-button
          >
        </div>
      </div>

      <div class="version-info-list">
        <div
          class="version-info-item"
          v-for="(child, index) in item.versionList"
          :key="index + '-version'"
          :style="getHeight(child)"
        >
          <div class="info-title">{{ child.title }}</div>
          <div class="info-text">
            {{ child.tips }}
          </div>
          <div class="check-box">
            <img
              src="@/assets/image/check.png"
              v-if="!child.active"
              class="check-icon"
              alt=""
            />
            <img
              src="@/assets/image/check-active.png"
              v-else
              class="check-icon"
              alt=""
            />
          </div>
        </div>

        <div class="no-list" v-if="item.versionList.length == 0">
          提出您的定制需求，最快7天完成
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { withDefaults, defineProps } from "vue";
import comButton from "@/components/com-button/com-button.vue";
import type { BuyVersion, VersionList } from "../buy-version/types";
import { IsPC } from "@/common/utils";
interface Props {
  item: BuyVersion;
  bg: "white" | "";
}

interface Events {
  (e: "onBuyClick", value: BuyVersion): void;
}
const emits = defineEmits<Events>();
const props = withDefaults(defineProps<Props>(), {
  item: () => {
    return {
      versionName: "",
      oldPrice: "",
      price: 0,
      unit: "",
      versionList: [],
    };
  },
  bg: "",
});

const getHeight = (data: VersionList) => {
  if (IsPC() && data.height) {
    return { height: data.height + "px" };
  } else {
    return {};
  }
};

const onBuyClick = () => {
  emits("onBuyClick", props.item);
};
</script>
<style lang="less">
@import "@/style/var.less";
@import "./index.less";
</style>
